<template>
  <div class="link-aside">
    <h1 class="title">
      <img class="icon" src="../../assets/svg/icon-link.svg" /> 友情链接
    </h1>

    <div class="link-item" v-for="item in links" :key="item.link">
      <el-avatar :src="item.avatar"></el-avatar>
      <div class="right">
        <a class="title" v-text="item.title" :href="item.link" target="_blank">
          博客名
        </a>
        <p class="desc" v-text="item.desc">博客描述</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "link-aside",
  data() {
    return {
      links: [
        {
          avatar:
            "https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=8662490,1204750797&fm=111&gp=0.jpg",
          link: "http://blog.rwbb.xyz/",
          title: "RuiWenのBlog",
          desc: "瑞文的博客"
        }
      ]
    };
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.link-aside {
  background-color: #fff;
  border: 1px solid $border-color;
  border-radius: 10px;
  padding: 20px;

  .icon {
    width: 24px;
    vertical-align: middle;
  }

  h1.title {
    font-size: 18px;
    border-bottom: 1px solid $border-color;
    padding-bottom: 16px;
    cursor: pointer;
    &:hover {
      color: #30a9de;
    }
  }

  .link-item {
    display: flex;
    margin-top: 30px;

    .num {
      height: 40px;
      width: 40px;
      text-align: center;
      line-height: 40px;
      border-radius: 50%;
      background-color: #0ab383;
      color: #fff;
      font-weight: 700;
      font-size: 16px;
    }

    .right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 20px;

      .title {
        color: #000;
        cursor: pointer;
        &:hover {
          color: #30a9de;
        }
      }

      .desc {
        color: $text-level-2;
        font-size: 13px;
      }
    }
  }
}
</style>
